<template>
	<view class="container">
		<!-- #ifdef MP -->
		<u-navbar style="position: fixed;z-index: 10000;" :border-bottom="false" :is-back="false" :title="alpha < 0.5 ? '' : userInfo.nickName || '我的'" :is-fixed="true" :background="navbarBackground" :title-color="titleColor"><!-- <text @tap.stop="toPage" data-url="/pageSetting/index/index" class="setting suifont sui-shezhi3" :style="{ color: titleColor }" slot="right"></text> --></u-navbar>
		<!-- #endif -->

		<view class="mine-top" :class="{ 'no-login': !userToken }">
			<image :src="bannerPath" class="mine-background" mode="aspectFill"></image>
			<image v-if="userToken" class="mine-modify" src="@/static/images/mine/icon-modify-data.png" @tap.stop="toUserDataPage"></image>
			<view class="mine-card" @tap.stop="chooseUserBanner">
				<mine-face></mine-face>
				<view class="user-info">
					<template>
						<view class="user-name" v-if="userToken" @tap.stop="toUserDataPage">
							<text>{{ userInfo.nickName }}</text>
							<!-- <image :src="userInfo.vip_file" class="user-vip" v-if="userInfo.is_vip"></image> -->
						</view>
						<view class="user-name" v-else>请登录</view>
					</template>
					<block v-if="userToken">
						<view class="user-base">
							<sex-age-symbol></sex-age-symbol>

							<view class="user-base-item user-auth" v-if="userInfo.authentication == 1">
								<image src="@/static/images/mine/mine-auth-complete.png" class="user-auth-icon" />
								<view class="user-auth-text">已实名</view>
							</view>
							<view class="user-base-item user-auth to-auth" v-else @tap.stop="toPage" data-url="/pageUser/certification/input">
								<image src="@/static/images/mine/mine-auth-need.png" class="user-auth-icon" />
								<view class="user-auth-text">去实名</view>
							</view>
							<view class="user-identity-sign" v-if="userInfo.login_identity == 20">红娘</view>
						</view>
						<view class="user-statistics">
							<view class="user-statistics-item" @tap.stop="toPage" data-url="/pageUser/zone/behavior">
								<view class="user-statistics-num">{{ userInfo.master_data ? userInfo.master_data.follow_count : '0' }}</view>
								<view class="user-statistics-label">关注</view>
							</view>
							<view class="user-statistics-dot"></view>
							<view class="user-statistics-item" @tap.stop="toPage" data-url="/pageUser/zone/behavior?type=fans">
								<view class="user-statistics-num">{{ userInfo.master_data ? userInfo.master_data.fans_count : '0' }}</view>
								<view class="user-statistics-label">粉丝</view>
							</view>
						</view>
						<view class="user-map" v-if="labelList.length > 0">
							<view class="user-map-item" v-for="(item, index) in labelList" :key="item.id">{{ item.name }}</view>
						</view>
					</block>
				</view>
				<view class="card-safe-area"></view>
				<view class="no-login-mask" @tap.stop="toLogin" v-if="!userToken"></view>
			</view>
			<view class="mine-card-bottom"></view>
		</view>
		<view class="mine-body">
			<view class="mine-body-card mine-vip" @tap.stop="toPage" data-url="/pageUser/vip/home" :data-auth="true" v-if="!!userInfo.vip_notice"><image class="mine-vip-tips" :src="vipBanner.vip_notice_banner" mode="aspectFill"></image></view>
			<view class="mine-body-card mine-grid" style="margin-top: 12rpx;" :class="{ hide: userInfo.login_identity == 20 }">
				<u-grid :col="5" :border="false" @click="tapGirdItem">
					<u-grid-item :index="0">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-album.png" mode="aspectFit"></image>
						<view class="mine-grid-text">个人相册</view>
					</u-grid-item>
					<u-grid-item :index="1">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-dynamic.png" mode="aspectFit"></image>
						<view class="mine-grid-text">动态</view>
					</u-grid-item>
					<u-grid-item :index="2">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-wallet.png" mode="aspectFit"></image>
						<view class="mine-grid-text">钱包</view>
					</u-grid-item>
					<u-grid-item :index="3">
						<template v-if="userToken">
							<view class="unread-bubble" v-if="userInfo.master_data.like_count > 0">
								<view class="unread-bubble-badge">{{ userInfo.master_data.like_count > 99 ? '99+' : userInfo.master_data.like_count }}</view>
							</view>
						</template>
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-like.png" mode="aspectFit"></image>
						<view class="mine-grid-text">喜欢我</view>
					</u-grid-item>
					<u-grid-item :index="4">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-qrcode.png" mode="aspectFit"></image>
						<view class="mine-grid-text">我的名片</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="mine-body-card mine-grid" style="margin-top: 12rpx;" :class="{ hide: userInfo.login_identity == 10 }" v-if="userToken">
				<u-grid :col="4" :border="false" @click="tapGirdItem">
					<u-grid-item :index="0">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-album.png" mode="aspectFit"></image>
						<view class="mine-grid-text">个人相册</view>
					</u-grid-item>
					<u-grid-item :index="1">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-dynamic.png" mode="aspectFit"></image>
						<view class="mine-grid-text">动态</view>
					</u-grid-item>
					<u-grid-item :index="2">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-wallet.png" mode="aspectFit"></image>
						<view class="mine-grid-text">钱包</view>
					</u-grid-item>
					<u-grid-item :index="4">
						<image class="mine-grid-image" src="@/static/images/mine/icon-mine-qrcode.png" mode="aspectFit"></image>
						<view class="mine-grid-text">我的名片</view>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="mine-body-card mine-vip" @tap.stop="toPage" data-url="/pageUser/vip/home" :data-auth="true">
				<image class="mine-vip-image" :src="userInfo.vip_banner || vipBanner.coupid_vip_banner" mode="aspectFill" v-if="userInfo.login_identity == 20"></image>
				<image class="mine-vip-image" :src="userInfo.vip_banner || vipBanner.user_vip_banner" mode="aspectFill" v-else></image>
			</view>
			<view class="mine-body-card">
				<view class="mine-body-card-header dis-flex">
					<text class="f-30">我的订单</text>
					<view class="dis-flex flex-y-center" @tap="toPage" data-url="/pageShop/order/index?type=all" :data-auth="true">
						<text class="f-24 col-6">全部订单</text>
						<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
					</view>
				</view>
				<view class="mine-body-card-content">
					<view class="order-navbar dis-flex">
						<view class="order-navbar-item flex-box" @tap="toPage" data-url="/pageShop/order/index?type=all" :data-auth="true">
							<text class="order-navbar-icon suifont sui-form"></text>
							<text class="order-navbar-name">全部订单</text>
						</view>
						<view class="order-navbar-item flex-box" @tap="toPage" data-url="/pageShop/order/index?type=payment" :data-auth="true">
							<text class="order-navbar-icon suifont sui-daifukuan"></text>
							<text class="order-navbar-name">待付款</text>
							<!-- <text class="order-badge" v-if="orderCount.payment > 0">{{ orderCount.payment }}</text> -->
						</view>
						<view class="order-navbar-item flex-box" @tap="toPage" data-url="/pageShop/order/index?type=received" :data-auth="true">
							<text class="order-navbar-icon suifont sui-daishouhuo"></text>
							<text class="order-navbar-name">待收货</text>
							<!-- <text class="order-badge" v-if="orderCount.received > 0">{{ orderCount.received }}</text> -->
						</view>
						<view class="order-navbar-item flex-box" @tap="toPage" data-url="/pageShop/order/refund/index" :data-auth="true">
							<text class="order-navbar-icon suifont sui-shouhou"></text>
							<text class="order-navbar-name">退款/售后</text>
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="mine-body-card mine-vip" @tap.stop="followMp" v-if="isWechat"><image class="mine-vip-image" :src="adv.subscribe_adv" mode="aspectFill"></image></view>
			<!-- #endif -->

			<view class="mine-body-card" v-if="userToken">
				<view class="mine-body-card-header dis-flex no-border">
					<text class="f-30">每日签到</text>
					<view class="dis-flex flex-y-center">
						<text class="f-24 col-6">连续签到，能获得更多积分哦~</text>
						<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
					</view>
				</view>
				<view class="mine-body-card-content"><sign-in></sign-in></view>
			</view>
			<view class="mine-body-card mine-menu">
				<view class="mine-body-card-content ">
					<u-cell-group :border="false">
						<view @tap.stop="toPage" data-url="/pageShop/flow/index" :data-auth="true">
							<u-cell-item :border-bottom="false" title="购物车"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-cart.png"></image></u-cell-item>
						</view>
						<view @tap.stop="toPage" data-url="/pageDealer/index/index" :data-auth="true">
							<u-cell-item :border-bottom="false" title="分销中心"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-team.png"></image></u-cell-item>
						</view>
						<view @tap.stop="toPage" data-url="/pageUser/gift/index" :data-auth="true" v-if="userInfo.login_identity != 20">
							<u-cell-item :border-bottom="false" title="收到礼物"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-gift.png"></image></u-cell-item>
						</view>
						<view @tap.stop="toPage" data-url="/pageShop/points/index" :data-auth="true">
							<u-cell-item :border-bottom="false" title="积分" :value="userInfo.coins > 0 ? userInfo.coins + '积分' : '0积分'" :arrow="userInfo.authentication <= 0"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-point.png"></image></u-cell-item>
						</view>
						<template>
							<view @tap.stop="toPage" data-url="/pageUser/certification/input" v-if="!userInfo.authentication && userToken" :data-auth="true">
								<u-cell-item :titleStyle="{ fontWeight: 700, color: '#000', fontSize: '30rpx' }" :border-bottom="false" value="去实名" title="实名认证"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-auth.png"></image></u-cell-item>
							</view>
							<view @tap.stop="toPage" data-url="/pageUser/zone/blacklist" :data-auth="true" v-else>
								<u-cell-item :border-bottom="false" title="黑名单"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-blacklist.png"></image></u-cell-item>
							</view>
						</template>
						<view @tap.stop="handleMatchmakerSwitch" v-if="userInfo.authentication && userToken">
							<u-cell-item :border-bottom="false" title="切换单身会员" v-if="userInfo.login_identity == 20"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-switch.png"></image></u-cell-item>
							<template v-else-if="userInfo.login_identity == 10">
								<u-cell-item :border-bottom="false" title="切换红娘身份" v-if="applyStatus == 20"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-switch.png"></image></u-cell-item>
								<u-cell-item :border-bottom="false" title="申请红娘" :value="applyText" v-else><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-switch.png"></image></u-cell-item>
							</template>
						</view>
						<!-- #ifdef MP -->
						<view @tap.stop="toPage" data-url="/pageSetting/index/index" :data-auth="true">
							<u-cell-item :border-bottom="false" title="设置"><image class="cell-icon-image" slot="icon" src="@/static/images/mine/icon-mine-setting.png"></image></u-cell-item>
						</view>
						<!-- #endif -->
					</u-cell-group>
				</view>
			</view>
		</view>
		<image @tap.stop="toPage" data-url="/pageUser/certification/input" v-if="!userInfo.authentication && userToken" :data-auth="true" class="toAuthFixed" :src="adv.auth_adv" mode="aspectFit"></image>
		<!-- #ifdef H5 || MP -->
		<face-popup v-model="facePopupShow"></face-popup>
		<!-- #endif -->
	</view>
</template>

<script>
import Tools from '@/utils/Tools.js';
import sexAgeSymbol from '@/components/custom/sex-age-symbol.vue';
import signIn from '@/components/custom/sign-in.vue';
import mineFace from '@/components/custom/mine-face.vue';
// #ifdef H5 || MP
import facePopup from '@/components/custom/face-popup.vue';
// #endif
import { mapState } from 'vuex';
export default {
	// #ifdef APP-PLUS
	components: { sexAgeSymbol, signIn, mineFace },
	// #endif
	// #ifdef H5 || MP
	components: { sexAgeSymbol, signIn, mineFace, facePopup },
	// #endif
	data() {
		return {
			imageTargetType: null,
			pageScrollTop: 0,
			// #ifdef MP
			titleColor: '#fff',
			// #endif
			applyStatus: 0,
			rejectReasonText: '',
			bannerTempPath: '',
			subNvueShow: false,
			// #ifndef APP-PLUS
			facePopupShow: false,
			// #endif
			popopDisableShow: false,
			isWechat: false
		};
	},
	computed: {
		...mapState({
			vipBanner: state => state.cache.vipBanner,
			vipNoticeBanner: state => state.cache.vipBanner,
			adv: state => state.cache.adv
		}),
		// #ifdef MP
		navbarBackground: function() {
			const alpha = this.pageScrollTop / 100;
			return { backgroundColor: `rgba(213,178,96,${this.pageScrollTop / 100})` };
		},
		alpha: function() {
			const alpha = this.pageScrollTop / 100;
			return alpha < 1 ? alpha : 1;
		},
		// #endif
		labelList: function() {
			if (this.userToken && this.userInfo.label) {
				return JSON.parse(this.userInfo.label);
			}
			return [];
		},
		applyText: function() {
			let applyText = '';
			switch (this.applyStatus) {
				case 10:
					applyText = '审核中';
					break;
				case 20:
					applyText = '已审核通过';
					break;
				case 30:
					applyText = '审核未通过';
					break;
				default:
					break;
			}
			return applyText;
		},
		bannerPath: function() {
			if (this.bannerTempPath) {
				return this.bannerTempPath;
			}
			if (this.userInfo.banner_image_id > 0) {
				return this.userInfo.banner.file_path;
			}
			return `${this.staticFileDomain}/static/temp/mine-head.png`;
		}
	},
	onNavigationBarButtonTap(item) {
		if (item.index == 0) {
			this.toPage({
				currentTarget: {
					dataset: {
						url: '/pageSetting/index/index',
						auth: true
					}
				}
			});
		}
	},
	onLoad() {
		// this.toLogin();
		uni.$on('croperComplete', this.croperComplete);
		uni.$on('subFaceClose', this.setSubnvueClose);
		// Tools.switchTabber();
	},
	onUnload() {
		uni.$off('croperComplete', this.croperComplete);
		uni.$off('subFaceClose', this.setSubnvueClose);
	},
	// #ifdef MP
	onPageScroll(e) {
		this.pageScrollTop = e.scrollTop;
	},
	// #endif
	onPullDownRefresh() {},
	onShow() {
		this.isWechat = Tools.isWechat();
		if (this.isLogin()) {
			this.refreshUserInfo();
			this.getCupidInfo();
			if (!this.popopDisableShow) {
				this.popopDisableShow = true;
				setTimeout(() => {
					// #ifdef APP-PLUS
					if (!this.subNvueShow && this.userInfo.login_identity == 10) {
						if (!this.userInfo.avatar_id) {
							const subNVue = uni.getSubNVueById('faceInMine');
							this.subNvueShow = true;
							subNVue.show('fade-in', 300, () => {
								// 打开后进行一些操作...
								//
							});
						} else if (!this.userInfo.check_finish.coup_finish || !this.userInfo.check_finish.basic_finish) {
							uni.showModal({
								title: '您还有资料尚未完善',
								content: '完善资料系统将进行精准匹配',
								confirmText: '立即完善',
								cancelText: '稍后',
								success: e => {
									if (e.confirm) {
										this.toUserDataPage();
									}
								}
							});
						}
					}
					// #endif
					// #ifdef H5 || MP
					if (this.userInfo.login_identity == 10) {
						if (!this.userInfo.avatar_id) {
							this.facePopupShow = true;
						} else if (!this.userInfo.check_finish.coup_finish || !this.userInfo.check_finish.basic_finish) {
							uni.showModal({
								title: '您还有资料尚未完善',
								content: '完善资料系统将进行精准匹配',
								confirmText: '立即完善',
								cancelText: '稍后',
								success: e => {
									if (e.confirm) {
										this.toUserDataPage();
									}
								}
							});
						}
					}
					// #endif
				}, 100);
			}
			// if (this.isLogin()) {
			// }
		}
	},
	methods: {
		// toLogin(){
		// 	super()
		// }
		setSubnvueClose() {
			this.subNvueShow = false;
		},
		getCupidInfo() {
			this.$u.api.getCupidInfo().then(res => {
				if (res.data) {
					this.applyStatus = res.data.info.apply_status.value || 0;
					this.rejectReasonText = res.data.info.reject_reason || '';
				}
			});
		},

		toAblumPage() {
			this.navigateTo({
				url: '/pageUser/album/index'
			});
		},
		chooseImageToCropper(imageTargetType) {
			uni.chooseImage({
				count: 1,
				success: res => {
					this.navigateTo({
						url:
							'/pageSupport/supplement/cropper' +
							this.$u.queryParams({
								imagePath: res.tempFilePaths[0],
								viewToken: this.viewToken,
								imageTargetType,
								aspectRatio: 1,
								minBoxWidthRatio: 0.5
							})
					});
				}
			});
		},
		chooseUserBanner() {
			this.chooseImageToCropper('userBanner');
		},
		chooseFaceImage() {
			uni.chooseImage({
				count: 1,
				success: res => {
					this.navigateTo({
						url:
							'/pageSupport/supplement/cropper? ' +
							this.$u.queryParams({
								imagePath: res.tempFilePaths[0],
								viewToken: this.viewToken,
								aspectRatio: 1,
								minBoxWidthRatio: 0.5
							})
					});
				}
			});
		},
		croperComplete(data) {
			if (data.fromToken === this.viewToken) {
				const dataRes = data.res;
				this.bannerTempPath = dataRes.path;
				this.$u.api.uploadImage(dataRes.source, { param: JSON.stringify(dataRes.param) }).then(res => {
					this.$u.api.saveUserBasic({ banner_image_id: res.data.file_id }).then(() => {
						this.refreshUserInfo();
					});
				});
			}
		},
		// onTargetOrder(e) {
		// 	let urls = {
		// 		all: '/pageShop/order/index?type=all',
		// 		payment: '/pageShop/order/index?type=payment',
		// 		received: '/pageShop/order/index?type=received',
		// 		refund: '/pageShop/order/refund/index'
		// 	};
		// 	// 转跳指定的页面
		// 	this.navigateTo({
		// 		url: urls[e.currentTarget.dataset.type]
		// 	});
		// },
		toUserDataPage() {
			this.navigateTo({
				url: '/pageUser/data/index',
				animationType: 'slide-in-top'
			});
		},
		toWalletPage() {
			this.navigateTo({
				url: '/pageUser/wallet/index'
			});
		},
		completeUserInfo(data) {
			uni.setNavigationBarTitle({
				title: data.nickName
			});
		},
		tapGirdItem(index) {
			let url = '';
			switch (index) {
				case 0:
					url = '/pageUser/album/index';
					break;
				case 1:
					url = '/pageUser/moment/list';
					break;
				case 2:
					url = '/pageUser/wallet/index';
					break;
				case 3:
					url = '/pageUser/zone/hello';
					break;
				case 4:
					url = '/pageDealer/qrcode/qrcode';
					break;
				default:
					break;
			}

			if (url) {
				this.navigateTo({
					url: url
				});
			}
		},
		// #ifdef H5
		followMp() {
			location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4MzI5OTYzMA==#wechat_redirect';
		},
		// #endif

		handleMatchmakerSwitch() {
			if (this.userInfo.login_identity == 20) {
				uni.showModal({
					title: '切换身份提示',
					content: '您即将使用单身会员身份使用本系统\n请确保在已经知悉后果的情况下与其他单身团进行互动',
					confirmText: '切换',
					cancelText: '我在想想',
					success: e => {
						if (e.confirm) {
							this.$u.api.switchIdentity().then(res => {
								this.refreshUserInfo();
							});
						}
					}
				});
			} else {
				if (this.applyStatus == 0) {
					this.navigateTo({
						url: '/pageSupport/apply/matchmaker'
					});
				} else if (this.applyStatus == 10) {
					uni.showToast({
						icon: 'none',
						title: '审核中，请耐心等待'
					});
				} else if (this.applyStatus == 20) {
					uni.showModal({
						title: '切换身份提示',
						content: '您即将切换到红娘身份，请在相关法律法规范围内服务自己的单身会员',
						confirmText: '切换',
						cancelText: '取消',
						success: e => {
							if (e.confirm) {
								this.$u.api.switchIdentity().then(res => {
									this.refreshUserInfo();
								});
							}
						}
					});
				} else if (this.applyStatus == 30) {
					uni.showModal({
						title: '驳回理由',
						content: this.rejectReasonText,
						confirmText: '重新申请',
						cancelText: '以后再说',
						success: result => {
							if (result.confirm) {
								this.navigateTo({
									url: '/pageSupport/apply/matchmaker'
								});
							}
						}
					});
				}
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f9f9f9;
}
.mine-top {
	// height: calc(365rpx + 32rpx + 44px + var(--status-bar-height));
	position: relative;
	overflow: hidden;
	padding-bottom: 32rpx;
	background-color: #fff;
	&.no-login {
		// height: calc(240rpx + 32rpx + 44px + var(--status-bar-height));
	}
	.mine-background {
		position: absolute;
		width: 750rpx;
		height: 750rpx;
		top: calc(100% - 750rpx);
		z-index: 0;
		background-position: bottom;
		background-size: cover;
	}
	.mine-modify {
		width: 86rpx;
		height: 384rpx;
		position: absolute;
		z-index: 10;
		background-position: bottom;
		background-size: cover;
		left: 135rpx;
		top: calc((256rpx + 44rpx + var(--status-bar-height)) - 384rpx);
		animation: mineModifyAnimation 7s ease-in-out infinite;
	}
	.mine-card {
		padding: calc(44px + var(--status-bar-height) + 4rpx) 0 0 0;
		// height: calc(365rpx + 32rpx + 44px + var(--status-bar-height));
		display: flex;
		position: relative;
		align-items: center;
		flex-direction: column;
		.card-safe-area {
			padding-bottom: 30rpx;
		}
		.no-login-mask {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 100;
		}
		.user-info {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 9rpx;
			.user-name {
				display: flex;
				align-items: center;
				height: 45rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				padding: 0 50rpx;
				position: relative;

				.user-vip {
					height: 45rpx;
					width: 45rpx;
					position: absolute;
					right: 0;
					padding: 2rpx;
				}
			}
			.user-base {
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;

				.user-base-item {
					margin-left: 8rpx;
					&:nth-child(1) {
						margin-left: 0;
					}
				}
				.user-identity-sign {
					height: 23rpx;
					width: 60rpx;
					background-color: $theme-main-color;
					border-radius: 10rpx;
					// border: 1rpx solid #fff;
					color: #fff;
					font-size: 21rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 4rpx;
				}
				.user-sex {
					width: 53rpx;
					height: 25rpx;
					background: linear-gradient(180deg, rgba(255, 77, 126, 1) 0%, rgba(241, 100, 72, 1) 100%);
					border-radius: 9rpx;
					margin-left: 8rpx;
					padding: 0 4rpx 0 2rpx;
					display: flex;
					align-items: center;
					z-index: 1;
					.user-sex-icon {
						width: 20rpx;
						height: 20rpx;
					}
					.user-sex-age {
						height: 25rpx;
						font-size: 18rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
						line-height: 25rpx;
						z-index: 1;
					}
				}
				.user-auth {
					height: 30rpx;
					display: flex;
					align-items: center;
					margin-left: 10rpx;

					.user-auth-icon {
						width: 20rpx;
						height: 20rpx;
						.suifont {
							font-size: 14rpx;
						}
					}
					.user-auth-text {
						height: 28rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						letter-spacing: 2rpx;
						margin-left: 6rpx;
					}
					&.to-auth {
						.user-auth-icon {
							width: 24rpx;
							height: 24rpx;
						}
						.user-auth-text {
							font-size: 22rpx;
						}
					}
				}
			}
			.user-statistics {
				margin-top: 10rpx;
				height: 33rpx;
				display: flex;
				.user-statistics-dot {
					width: 5rpx;
					height: 5rpx;
					background: rgba(255, 255, 255, 1);
					border-radius: 3rpx;
					margin: 0 9rpx;
					margin-top: 20rpx;
				}
				.user-statistics-item {
					display: flex;
					height: 30rpx;
					align-items: flex-end;
					z-index: 1;
					color: #fff;
					&.user-statistics-sign {
						margin-top: 7rpx;
						max-width: 250rpx;
						height: 25rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						line-height: 25rpx;
						@include ellipsis(1);
						margin-right: 27rpx;
						.user-statistics-sign-text {
							letter-spacing: 2rpx;
							font-size: 24rpx;
						}
					}
					.user-statistics-num {
						height: 33rpx;
						font-size: 32rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						margin-right: 5rpx;
					}
					.user-statistics-label {
						font-size: 20rpx;
						height: 25rpx;
						font-weight: 400;
					}
				}
			}
			.user-map {
				font-size: 21rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				color: #000;
				margin-top: 16rpx;
				padding: 0 60rpx;
				flex-wrap: wrap;

				.user-map-item {
					height: 28rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 14rpx;
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0 12rpx;
					margin: 10rpx 10rpx 0;
				}
			}
		}
	}
	.mine-card-bottom {
		height: 64rpx;
		border-radius: 32rpx;
		width: 750rpx;
		position: absolute;
		z-index: 11;
		bottom: -32rpx;
		background-color: #f8f8f8;
	}
}
.mine-body {
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	flex-direction: column;

	.mine-body-card {
		width: 670rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		padding: 15rpx 0;
		overflow: hidden;
		margin-bottom: 20rpx;
		&.hide {
			display: none;
		}
		.mine-body-card-header {
			margin: auto 30rpx;
			padding-bottom: 10rpx;
			height: 70rpx;
			border-bottom: 1px solid #eee;
			justify-content: space-between;
			align-items: center;
			&.no-border {
				border-bottom: 0 solid #eee;
			}
		}
	}
}
.mine-menu {
	padding: 0 !important;
	background-color: #fff;
	.cell-icon-image {
		height: 44rpx;
		width: 44rpx;
		margin-right: 20rpx;
	}
}
.setting {
	font-size: 18px;
	margin-right: 15px;
	color: #fff;
	// color: rgba($color: #d5b260, $alpha: 1.0);
}

//

.order-navbar {
	width: 100%;
	padding: 10rpx 0px;
	.order-navbar-item {
		.order-navbar-icon {
			text-align: center;
			margin: 0 auto;
			display: block;
			padding: 10rpx 0;
			color: #000;
			font-size: 36rpx;
		}
		.order-navbar-name {
			display: block;
			font-size: 24rpx;
			color: #666;
			text-align: center;
			margin-right: 10rpx;
		}
	}
}

.mine-vip {
	padding: 0 !important;
	.mine-vip-image {
		height: 193rpx;
		width: 670rpx;
		display: block;
	}
}
.mine-grid {
	padding: 0 !important;
	.mine-grid-image {
		width: 68rpx;
		height: 68rpx;
	}
	.mine-grid-text {
		height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(151, 151, 151, 1);
		line-height: 33rpx;
		margin-top: 17rpx;
	}
}

.unread-bubble {
	position: absolute;
	right: 16rpx;
	top: 16rpx;
	z-index: 10;
}
.unread-bubble-badge {
	position: relative;
	min-width: 40rpx;
	height: 40rpx;
	padding: 0 10rpx;
	background: rgba(248, 89, 98, 1);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 20rpx;
	font-size: 22rpx;
	color: #fff;
}
.toAuthFixed {
	width: 120rpx;
	height: 120rpx;
	position: fixed;
	right: 0rpx;
	bottom: calc(50rpx + var(--window-bottom));
	z-index: 20;
}
.mine-vip-tips{
	height: 100rpx;
	width: 670rpx;
	border-radius: 20rpx;
	display: block;
}
</style>
